<template>
  <div class="app-container home">
    <!-- 搜索内容 -->
    <user-drug-select
      v-model="serarchValue"
      placeholder="请选择人员"
      style="width: 450px"
      :types="['drug_sjsk', 'drug_zdgz']"
      :onchange="handleChange"
    />
    <!--导航入口-->
    <div class="route-box">
      <!-- 第一层 -->
      <div class="ry-flex ry-col-center ry-row-between">
        <div
          v-for="(item, index) in firstLayerList"
          :key="index"
          class="bigMenuItem ry-flex-col ry-center"
          @click="toPath(item.path)"
        >
          <div
            class="menu-icon-box ry-flex-col ry-center"
            :style="{ background: item.bgColor }"
          >
            <svg-icon
              :icon-class="item.icon"
              :style="{ color: `${item.svgColor} !important`, fontSize: 30 }"
            />
          </div>
          <div>{{ item.label }}</div>
        </div>
      </div>
      <div style="display: flex; align-items: center; margin: 18px 0">
        <div
          class="menu-icon-box ry-flex-col ry-center"
          style="
            width: 26px;
            height: 26px;
            background: rgb(103, 8, 181);
            margin-bottom: 0;
            margin-right: 6px;
          "
        >
          <svg-icon
            icon-class="home-rygl"
            style="color: #fff; font-size: 12px"
          />
        </div>
        <div class="menuTitle">
          <div>人员管理</div>
        </div>
      </div>
      <!-- 第二层 -->
      <div class="ry-flex ry-col-center" style="flex-wrap: wrap">
        <div
          v-for="(item, index) in secondLayerList"
          :key="index"
          class="smallMenuItem ry-flex-col ry-center"
          @click="toPath(item.path)"
        >
          <div
            class="menu-icon-box ry-flex-col ry-center"
            :style="{ background: item.bgColor }"
          >
            <svg-icon
              :icon-class="item.icon"
              :style="{ color: `${item.svgColor} !important`, fontSize: 30 }"
            />
          </div>
          <div>{{ item.label }}</div>
        </div>
      </div>
      <!-- 第三层 -->
      <div style="display: flex; align-items: center; margin: 18px 0">
        <div
          class="menu-icon-box ry-flex-col ry-center"
          style="
            width: 26px;
            height: 26px;
            background: rgb(103, 8, 181);
            margin-bottom: 0;
            margin-right: 6px;
          "
        >
          <svg-icon
            icon-class="home-jigou"
            style="color: #fff; font-size: 12px"
          />
        </div>
        <div class="menuTitle">
          <div>职能机构</div>
        </div>
      </div>
      <div class="ry-flex ry-col-center" style="flex-wrap: wrap">
        <div
          v-for="(item, index) in thirdList"
          :key="index"
          class="smallMenuItem ry-flex-col ry-center"
          @click="toPath(item.path)"
        >
          <div
            class="menu-icon-box ry-flex-col ry-center"
            :style="{ background: item.bgColor }"
          >
            <svg-icon
              :icon-class="item.icon"
              :style="{ color: `${item.svgColor} !important`, fontSize: 30 }"
            />
          </div>
          <div>{{ item.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      serarchValue: "",
      firstLayerList: [
        {
          label: "智能预警",
          icon: "home-yujing",
          path: "/early-warning/index",
          bgColor: "rgb(224,222,239)",
          svgColor: "rgb(31,39,119)",
        },
        {
          label: "毒品问题治理考核",
          icon: "home-zlkh",
          path: "/drug-control/index",
          bgColor: "rgb(223,232,255)",
          svgColor: "rgb(107,151,222)",
        },
        {
          label: "统计",
          icon: "home-tongji",
          path: "/home-statistics/index",
          bgColor: "rgb(220,240,232)",
          svgColor: "rgb(108,191,150)",
        },
        {
          label: "查询",
          icon: "home-chaxun",
          path: "/home-query/index",
          bgColor: "rgb(248,239,218)",
          svgColor: "rgb(235,211,102)",
        },
        {
          label: "可视化",
          icon: "home-keshihua",
          path: "",
          bgColor: "rgb(245,225,219)",
          svgColor: "rgb(220,130,107)",
        },
      ],
      secondLayerList: [
        {
          label: "社康社戒人员",
          icon: "home-rygl",
          path: "/user/sjsk",
          bgColor: "rgb(221,245,252)",
          svgColor: "rgb(120,204,217)",
        },
        {
          label: "重点人员",
          icon: "home-rygl",
          path: "/user/zdgz",
          bgColor: "rgb(220,240,232)",
          svgColor: "rgb(108,191,150)",
        },
        {
          label: "康复救助人员",
          icon: "home-rygl",
          path: "/user/kfjz",
          bgColor: "rgb(223,232,255)",
          svgColor: "rgb(107,151,222)",
        },
        {
          label: "查获登记人员",
          icon: "home-rygl",
          path: "/user/chdj",
          bgColor: "rgb(248,239,218)",
          svgColor: "rgb(235,211,102)",
        },
        {
          label: "双列管人员",
          icon: "home-rygl",
          path: "/user/slg",
          bgColor: "rgb(220,240,232)",
          svgColor: "rgb(108,191,150)",
        },
      ],
      thirdList: [
        // 职能机构
        {
          label: "禁毒宣传",
          icon: "home-xuanchuan",
          path: "/duty/jdxc",
          bgColor: "rgb(224,222,239)",
          svgColor: "rgb(31,39,119)",
        },
        {
          label: "禁毒业务培训",
          icon: "home-ketangpeixun",
          path: "/duty/jdywpx",
          bgColor: "rgb(224,222,239)",
          svgColor: "rgb(31,39,119)",
        },
        {
          label: "就业培训",
          icon: "home-peixun",
          path: "/duty/jypx",
          bgColor: "rgb(223,232,255)",
          svgColor: "rgb(107,151,222)",
        },
        {
          label: "预防教育",
          icon: "home-yfjy",
          path: "/duty/yfjy",
          bgColor: "rgb(220,240,232)",
          svgColor: "rgb(108,191,150)",
        },
        {
          label: "涉毒排查",
          icon: "home-sdpc",
          path: "/duty/sdpc",
          bgColor: "rgb(220,240,232)",
          svgColor: "rgb(108,191,150)",
        },
        {
          label: "工作日志",
          icon: "home-gzrz",
          path: "/duty/gzrz",
          bgColor: "rgb(248,239,218)",
          svgColor: "rgb(235,211,102)",
        },
        {
          label: "交流互动",
          icon: "home-jlhd",
          path: "/msg/qa",
          bgColor: "rgb(248,239,218)",
          svgColor: "rgb(235,211,102)",
        },
        {
          label: "禁毒专干",
          icon: "home-jdzg",
          path: "/member/jdzg",
          bgColor: "rgb(248,239,218)",
          svgColor: "rgb(235,211,102)",
        },
        {
          label: "禁毒专职社工",
          icon: "home-jdzg",
          path: "/member/jdzzsg",
          bgColor: "rgb(248,239,218)",
          svgColor: "rgb(235,211,102)",
        },
        {
          label: "领导小组",
          icon: "home-ldxz",
          path: "/member/ldxz",
          bgColor: "rgb(248,239,218)",
          svgColor: "rgb(235,211,102)",
        },
        {
          label: "禁毒业务架构",
          icon: "home-ywjg",
          path: "/member/member",
          bgColor: "rgb(245,225,219)",
          svgColor: "rgb(220,130,107)",
        },
        {
          label: "行为风险预警",
          icon: "home-xwyj",
          path: "",
          bgColor: "rgb(248,239,218)",
          svgColor: "rgb(235,211,102)",
        },
      ],
      // 版本号
      version: "4.5.0",
    };
  },
  methods: {
    handleChange(event, subType) {
      this.$router.push({
        path: "/user/user-home/index",
        query: {
          userId: event,
          userSubType: subType,
        },
      });
    },
    toPath(path) {
      if (path) {
        this.$router.push(path);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  .serarchInputView {
    width: 500px;
  }
  .route-box {
    width: 90%;
    padding: 30px;
    margin: 0 auto;
    background: rgba(245, 249, 250, 1);
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0px 0px 10px #fff;
    text-align: left;
  }
  .bigMenuItem {
    background: #fff;
    border-radius: 5px;
    width: 19%;
    font-size: 14px;
    box-sizing: border-box;
    padding: 40px 0;
    cursor: pointer;
    box-shadow: 0px 0px 6px #ccc;
  }
  .menu-icon-box {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .menuTitle {
    font-size: 14px;
  }
  .smallMenuItem {
    background: #fff;
    border-radius: 5px;
    width: calc(16.7% - 20px);
    font-size: 14px;
    box-sizing: border-box;
    padding: 20px 0;
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 6px #ccc;
  }
  .smallMenuItem:nth-child(6n) {
    margin-right: 0;
  }
}
</style>
